<template>
	<view>
		<view class="content_wrapper">
			<image v-if="disabled " style="width: 100px;height: 80px;" @click="showImage(showImageData,indexs)"
				class="photo-img" :src="imageurl"></image>

			<view :style="style" v-if="!disabled " class="photo-img-wrapper" @click="handleselectFile">
				<image class="add-img" src="../../static/add_pictre.png"></image>

			</view>
		</view>

	</view>
</template>

<script>
	import request from '../../server/request.js'
	import {
		uploadFile
	} from "@/server/api.js"
	export default {
		//来自父组件的值 
		props: {
			fileList: {
				type: Array,
				default: () => []
			},
			value: {
				type: Array,
				default: () => []
			},
			style: {
				type: [Object, String],
				default: ''
			},
			showAdd: {
				type: Boolean,
				default: () => true
			},
			valueKey: {
				type: String,
				default: 'photo'
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				imageurl: "",
				fileHeader: this.fileHeader,
				showImageData: JSON.parse(JSON.stringify(this.fileList)),
			}
		},
		watch: {
			fileList: {
				handler() {
					this.showImageData = JSON.parse(JSON.stringify(this.fileList))
				},
				deep: true,
				immediate: true,
			}
		},
		methods: {
			//选择图片
			handleselectFile() {
				uni.hideKeyboard()
				this.choseImage();
			},
			choseImage() {
				// 任务详情上传图片
				uni.showActionSheet({
					itemList: ['拍照', '相册'],
					success: res => {
						let index = res.tapIndex;
						if (index === 0) {
							//#ifdef APP-PLUS || H5
							uni.chooseImage({
								sourceType: ['camera'],
								success: res => {
									console.log(2)
									console.log(res)
									let tempFilePaths = res.tempFiles;
									this.uploadImageReq(tempFilePaths);
								}
							});
							//#endif
						} else {
							uni.chooseImage({
								sourceType: ['album'],
								success: res => {
									console.log(3)
									console.log(res)
									let tempFilePaths = res.tempFilePaths;
									this.uploadImageReq(tempFilePaths[0]);
								}
							});

						}
					}
				});
			},
			//上传文件
			uploadImageReq(file) {
				uploadFile(file).then(res => {
					this.disabled = true
		
					this.imageurl = res;
					const {
						imageurl
					} = this;
					this.$emit('conceals', {
						imageurl
					})

				})
			},
			//删除图片
			deleteImage(index) {
				uni.showModal({
					title: '提示',
					content: '确定删除?',
					success: (res) => {
						if (res.confirm) {
							this.showImageData.splice(index, 1);
							this.$emit('imageChange', this.showImageData)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 预览
			showImage(list, index) {
				const imageList = []
				list.forEach(item => {
					imageList.push(item[this.valueKey])
				})
				uni.previewImage({
					urls: imageList,
					current: index
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content_wrapper {

		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;


		.image_wrapper {
			margin-right: 20rpx;
			position: relative;

			.photo-img {
				// padding: 10upx;
				width: 150upx;
				height: 150upx;
			}

			.deleteIcon {
				position: absolute;
				z-index: 99;
				overflow: hidden;
				top: -10rpx;
				right: -10rpx;
			}
		}

		.photo-img-wrapper {

			width: 150upx;
			height: 150upx;
			background: rgba(0, 0, 0, 0.02);
			border: 1upx solid #bfbfbf;
			box-sizing: border-box;
			border-radius: 5px 5px 5px 5px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			flex-direction: column;

			.add-img {
				width: 68upx;
				height: 68upx;
				color: #0081ff;
			}

			.add-desc {
				color: rgba(0, 0, 0, 0.65);
				font-size: 28upx;
				font-family: PingFangSC-regular;
			}
		}
	}
</style>
